{% extends 'base.html' %}
{% block title %}
    留言板
{% endblock %}
{% block styles %}
    {{ super() }}
    <style>
        #container {
            {#width: 1200px;#}
            margin: 0 auto;
        }

        #detail {
            background-color: rgba(232, 243, 242, 0.6);
            border-radius: 10px;
            margin-top: 20px;
            margin-bottom: 20px;
            padding: 20px 50px;
        }

        #detail h2 {
            text-align: center;
        }

        #detail h2 + div {
            height: 30px;
            line-height: 30px;
        }

        .item {
            overflow: auto;
            border-bottom: 1px solid lightgray;
            margin-bottom: 20px;
            padding: 10px;
        }

        #item_left {
            float: left;
            width: 10%;
            text-align: center;
        }

        #item_left img {
            width: 50px;
            height: 50px;
            border-radius: 25px;
        }

        #item_right {
            float: right;
            width: 90%;
        }

    </style>
{% endblock %}
{% block content %}
    <div id="container">
        <div id="detail">

            <div id="comment">
                <p>给我留言:</p>
                <div>
                    <form action="{{ url_for('user.show_board') }}" method="post">
                        <p>
                            <textarea name="board" class="form-control" style="width: 60%" rows="5" cols="60"
                                      placeholder="写下你想说的，开始我们的对话……"></textarea>
                        </p>
                        <p><input type="submit" value="发表留言" class="btn btn-info"></p>
                    </form>
                </div>
                <p style="margin: 20px 5px; border-bottom: 1px solid lightgray">

                </p>
                <div id="comment_item">
                    {% for board in boards.items %}
                        <div class="item">
                            <div id="item_left">
                                <img src="{% if board.user.icon %}
                                {{ url_for('static',filename=board.user.icon) }}
                                {% else %}
                                 {{ url_for('static',filename='images/touxiang.jpg') }}
                                {% endif %}" alt="">
                            </div>
                            <div id="item_right">
                                <p>
                                    <span>{% if not board.user.id %}
                                        匿名用户
                                    {% else %}
                                        {{ board.user.username }}
                                    {% endif %} </span>
                                    <span>{{ board.mdatetime }}</span>
                                </p>
                                <p>
                                    {{ board.content }}
                                </p>
                            </div>
                        </div>
                    {% endfor %}


                </div>
                <div id="paginate">
                    <nav aria-label="...">
                        <ul class="pager">
                            <li class=" {%if not boards.has_prev %} disabled {% endif %} previous" >
                                <a href="{{ url_for('user.show_board') }}?page={{ boards.prev_num }}"
                                   aria-label="Previous"><span aria-hidden="true">上一页</span></a>
                            </li>
                            <li class="{% if not boards.has_next %}disabled {% endif %} next">
                                <a href="{{ url_for('user.show_board') }}?page={{ boards.next_num }}"
                                   aria-label="Next"><span aria-hidden="true">下一页</span></a>
                            </li>
                        </ul>
                    </nav>

                </div>
            </div>

        </div>

    </div>
{% endblock %}
